<div class="dashboard-editor-header">
	<div class="dashboard-editor-title">
		<i class="icon icon-cogs"></i>
		Dashboard settings
	</div>

	<div ng-model="editor.index" bs-tabs style="text-transform:capitalize;">
		<div ng-repeat="tab in ['General', 'Rows', 'Features', 'Import']"
			 data-title="{{tab}}">
		</div>
		<div ng-repeat="tab in dashboard.nav" data-title="{{tab.type}}">
		</div>
	</div>

</div>

<div class="dashboard-editor-body">

	<div ng-if="editor.index == 0">
		<div class="editor-row">
			<div class="section">
				<div class="editor-option">
					<label class="small">Title</label><input type="text"
															 class="input-large"
															 ng-model='dashboard.title'></input>
				</div>
				<div class="editor-option">
					<label class="small">Theme</label><select
						class="input-small" ng-model="dashboard.style"
						ng-options="f for f in ['dark','light']"
						ng-change="styleUpdated()"></select>
				</div>
				<div class="editor-option">
					<label class="small">Time correction</label>
					<select ng-model="dashboard.timezone" class='input-small'
							ng-options="f for f in ['browser','utc']"></select>
				</div>
				<editor-opt-bool text="Hide controls (CTRL+H)"
								 model="dashboard.hideControls"></editor-opt-bool>
			</div>
		</div>
		<div class="editor-row">
			<div class="section">
				<div class="editor-option">
					<label class="small">Tags</label>
					<bootstrap-tagsinput ng-model="dashboard.tags"
										 tagclass="label label-tag"
										 placeholder="add tags">
					</bootstrap-tagsinput>
					<tip>Press enter to a add tag</tip>
				</div>
			</div>
		</div>
	</div>

	<div ng-if="editor.index == 1">
		<div class="editor-row">
			<div class="span6">
				<table class="grafana-options-table">
					<tr ng-repeat="row in dashboard.rows">
						<td style="width: 97%">
							{{row.title}}
						</td>
						<td><i ng-click="_.move(dashboard.rows,$index,$index-1)"
							   ng-hide="$first"
							   class="pointer icon-arrow-up"></i></td>
						<td><i ng-click="_.move(dashboard.rows,$index,$index+1)"
							   ng-hide="$last"
							   class="pointer icon-arrow-down"></i></td>
						<td>
							<a ng-click="dashboard.rows = _.without(dashboard.rows,row)"
							   class="btn btn-danger btn-mini">
								<i class="icon-remove"></i>
							</a>
						</td>
					</tr>
				</table>
			</div>
		</div>
	</div>

	<div ng-if="editor.index == 2">
		<div class="editor-row">
			<div class="section">
				<editor-opt-bool text="Templating"
								 model="dashboard.templating.enable"
								 change="checkFeatureToggles()"></editor-opt-bool>
				<editor-opt-bool text="Annotations"
								 model="dashboard.annotations.enable"
								 change="checkFeatureToggles()"></editor-opt-bool>
				<div class="editor-option text-center"
					 ng-repeat="pulldown in dashboard.nav">
					<label class="small" style="text-transform:capitalize;">{{pulldown.type}}</label>
					<input class="cr1" id="pulldown{{pulldown.type}}"
						   type="checkbox" ng-model="pulldown.enable"
						   ng-checked="pulldown.enable">
					<label for="pulldown{{pulldown.type}}" class="cr1"></label>
				</div>
				<editor-opt-bool text="Shared Crosshair (CTRL+O)"
								 model="dashboard.sharedCrosshair"></editor-opt-bool>
			</div>
		</div>
	</div>

	<div ng-if="editor.index == 3">
		<ng-include src="'app/partials/import.html'"></ng-include>
	</div>

	<div ng-repeat="pulldown in dashboard.nav" ng-controller="SubmenuCtrl"
		 ng-show="editor.index == 4+$index">
		<ng-include ng-show="pulldown.enable"
					src="pulldownEditorPath(pulldown.type)"></ng-include>
		<button ng-hide="pulldown.enable" class="btn"
				ng-click="pulldown.enable = true">Enable the {{pulldown.type}}
		</button>
	</div>

</div>

<div class="clearfix"></div>
</div>

<div class="dashboard-editor-footer">
	<div class="grafana-version-info" ng-show="editor.index === 0">
		<span class="editor-option small">
			Grafana version: {{grafanaVersion}} &nbsp;&nbsp;
		</span>
		<span grafana-version-check>
		</span>
	</div>

	<button type="button" class="btn btn-success pull-right"
			ng-click="editor.index=0;dismiss();reset_panel();dashboard.emit_refresh()">
		Close
	</button>
</div>
